<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="父级课程:">
            <el-select
              v-model="parms.courseClassParentId"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
              @change="fid"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程大类:">
            <el-select
              v-model="parms.courseClass"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型:">
            <el-select
              v-model="parms.courseType"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
            >
              <el-option :value="1" label="课程" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称:">
            <el-input v-model="parms.courseName" clearable style="width: 200px" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="章节数:">
            <el-input
              v-model="parms.courseChapter"
              type="number"
              clearable
              style="width: 200px"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总时长:">
            <el-time-picker
              v-model="parms.courseDuration"
              placeholder="请输入时间"
              size="mini"
              style="width: 200px"
              value-format="HH:mm:ss"
            ></el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="强度:">
            <el-select
              v-model="parms.strengthGrade"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
            >
              <el-option :value="1" label="低" />
              <el-option :value="2" label="中" />
              <el-option :value="3" label="高" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="水平:">
            <el-select
              v-model="parms.courseLevel"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
            >
              <el-option :value="1" label="初级" />
              <el-option :value="2" label="中级" />
              <el-option :value="3" label="高级" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权重:">
            <el-select
              v-model="parms.code"
              placeholder="请选择"
              clearable
              style="width: 200px"
              size="mini"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="上传视频:">
          <Upvideo @upVideo="upVideo" :type="1" :showLod="showLod"></Upvideo>
        </el-form-item>
      </el-row>
      <el-form-item label="课程简介:">
        <el-input v-model="parms.courseDetail" clearable type="textarea" style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="详细介绍:">
        <el-input
          v-model="parms.courseDetailDescription"
          clearable
          type="textarea"
          style="width: 95%"
          rows="5"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="add">新增</el-button>
      <!-- <el-button type="warning" size="mini">暂存</el-button> -->
      <el-button size="mini" @click="handCancle">取消</el-button>
    </div>
  </div>
</template>

<script>
import { add } from "@/api/course/standard";
import { getList } from "@/api/course/index";
import { option } from "@/api/action/action";
import Upvideo from "./update.vue";
export default {
  components: {
    Upvideo
  },
  data() {
    return {
      form: {
        name: ""
      },
      value: "",
      options: [],
      options1: [],
      options2: [],
      parms: {
        courseName: "",
        courseClass: "",
        courseParentId: 0,
        courseType: "",
        courseDetail: "",
        courseChapter: "",
        courseDuration: "",
        courseVideo: "",
        courseDetailDescription: "",
        courseDetail: "",
        strengthGrade: "",
        courseLevel: "",
        courseClassParentId: "",
        courseStatus: 1,
        code:null,
      },
      obj: {
        pageNum: 1,
        pagSize: 20
      },
      showLod: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    upVideo(e) {
      if (e.type == "add") {
        this.parms.courseVideo = e.val;
      }
    },
    fid() {
      let id = this.parms.courseClassParentId;
      this.parms.courseClass = null;
      if (id != 0) {
        getList(this.parms.pageNum, this.parms.pagSize, id).then(res => {
          let arr = res.rows;
          let arr1 = [];
          for (let i = 0; i < arr.length; i++) {
            arr1.push({ value: arr[i].id, label: arr[i].courseClassName });
          }
          this.options1 = arr1;
        });
      }
    },
    getList() {
      getList().then(res => {
        let arr = res.rows;
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
          arr1.push({ value: arr[i].id, label: arr[i].courseClassName });
        }
        this.options = arr1;
      });
      option().then(res => {
        console.log(res)
        let arr = res;
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
          arr1.push({ value: arr[i].id, label: arr[i].name });
        }
        this.options2 = arr1;
      });
    },
    add() {
      add(this.parms).then(res => {
        if (res.code === 200) {
          this.$message.success("新增成功");
          this.handCancle();
        }
      });
    },
    handCancle() {
      this.$emit("handCancle", 1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  watch: {
    showDialog: function(n, o) {
      if (n) {
        this.showLod = this.showDialog;
      }
    }
  }
};
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.el-table th.gutter {
  display: table-cell !important;
}
.dialog-footer {
  text-align: center;
}
</style>
